<template>
  <div class>
    <nly-container :fluid="true">
      <nly-breadcrumb>
        <nly-breadcrumb-item
          icon="nlyfont nly-icon-home-fill"
          to="/"
          text="首页"
        />
        <nly-breadcrumb-item
          icon="nlyfont nly-icon-outlet"
          to="/food"
          active
          text="私教订单管理"
        />
      </nly-breadcrumb>

      <section class="content">
        <row>
          <i-col :md="6" :sm="8">
            <Input
              v-model="searchText"
              search
              placeholder="根据用户昵称或订单号查询"
              enter-button="搜索"
              @on-search="search(searchText)"
            />
          </i-col>
          <Select
            v-model="data.pe_id"
            @on-change="change_type"
            style="width: 200px; margin-left: 26px"
            placeholder="请选择私教名称"
          >
            <Option :value="0">全部</Option>
            <Option
              v-for="(item, index) in count_scale"
              :value="item.pe_id"
              :key="index"
              >{{ item.pe_name }}</Option
            >
          </Select>
          <RadioGroup
            v-model="data.state"
            @on-change="changeType1"
            style="float: left; margin-left: 20px"
          >
            <Radio :label="3" border>全部</Radio>
            <Radio :label="0" border>未使用</Radio>
            <Radio :label="1" border>已使用</Radio>
            <Radio :label="2" border>已退款</Radio>
          </RadioGroup>
        </row>
        <br />
        <Table
          border
          :columns="header"
          :data="accountList"
          @on-selection-change="enterall"
          ref="selection"
        >
          <template slot-scope="{ row }" slot="avatar">
            <img
              :src="row.avatar"
              class="avatar"
            />
          </template>
          <template slot-scope="{ row }" slot="op_isuse">{{
            row.op_isuse == 0&& row.op_isrefund == 0 ? "未使用" : row.op_isuse == 1&& row.op_isrefund == 0  ? "已使用" : "已退款"
          }}</template>
          <template slot-scope="{ row }" slot="op_pay_type">{{
            row.op_pay_type == 0 ? "微信支付" : row.op_pay_type == 1 ? "余额支付" : "次卡支付"
          }}</template>
          
          <template slot-scope="{ row }" slot="action">
            <Button
              style=" margin-right: 10px;"
              type="error"
              size="small"
              v-if="row.op_isrefund != 1 "
              @click="refuseorder(row.out_trade_no)"
              >取消订单</Button
            >
            <Button
              style=""
              type="success"
              size="small"
              v-if="row.op_isuse == 0 && row.op_isrefund == 0"
              @click="useorder(row.out_trade_no)"
              >使用</Button
            >
          </template>
        </Table>
        <br />
        <div class="Page">
          <Page
            :total="total"
            show-elevator
            show-total
            :page-size="data.pageSize"
            :current="data.page"
            @on-change="changePage"
          />
        </div>
      </section>
    </nly-container>
  </div>
</template>
<script>
import apis from "@/api/category";
export default {
  components: {},
  data() {
    return {
      modalAddText: false,
      update: false,
      searchText: "",
      total: 0, //数据条数
      //页面数据
      data: {
        page: 1, //当前页
        pageSize: 10, //每页显示个数
        state: 3,
        par: "",
        pe_id: 0,
      },
      header: [
        {
          title: "用户昵称",
          key: "nickname",
          align: "center",
          width:120,
        },
        {
          title: "头像",
          slot: "avatar",
          key: "avatar",
          align: "center",
          width:120,
        },
        {
          title: "私教姓名",
          key: "pe_name",
          align: "center",
        },
        {
          title: "订单状态",
          slot: "op_isuse",
          key: "op_isuse",
          align: "center",
        },
        {
          title: "订单号",
          key: "out_trade_no",
          align: "center",
        },
        {
          title: "支付金额",
          key: "op_price",
          align: "center",
        },
        {
          title: "支付方式",
          slot: "op_pay_type",
          key: "op_pay_type",
          align: "center",
        },
        
        {
          title: "预约时长/次",
          key: "op_num",
          align: "center",
        },
        
        {
          title: "下单时间",
          key: "op_pay_time",
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          width: 180,
          fixed: "right",
          align: "left",
        },
      ],
      accountList: [],
      count_scale: [],
      pageNow: 1,
      selectclass: [],

      key: "",
    };
  },
  mounted() {
    let that = this;
    that.getpersonlist();
    this.get_listperson();
  },
  methods: {
    changeType1(val) {
      this.data.page = 1;
      this.data.state = val;
      console.log(this.data2);
      this.getpersonlist();
    },
    refuseorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单取消确认",
        content: `确定给次订单退款？`,
        onOk: () => {
          apis.refusepersonorder({ out_trade_no: order }).then((response) => {
            if (response.data.code == 200) {
              apis.refusemoney({ out_trade_no: order }).then((response) => {
                if (response.data.code == 200) {
                  this.$Message.success("退款成功");
                  this.getpersonlist();
                } else {
                  this.$Message.error("失败");
                }
              });
            } else if (response.data.code == 202) {
              this.$Message.success("退款成功");
              this.getpersonlist();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
     useorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单使用确认",
        content: `该订单确认已使用？`,
        onOk: () => {
          apis.useorder({ out_trade_no: order }).then((response) => {
            if (response.data.code == 200) {
               this.$Message.success("确认成功");
                  this.getpersonlist();
            }else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
    get_listperson() {
      apis
        .get_listperson()
        .then((response) => {
          if (response.data.code == 200) {
            this.count_scale = response.data.data;
          } else {
            this.$Message.error("请求错误");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("请求私教列表错误!");
        });
    },
    change_adm_area(val) {
      this.dataText.cb_type = "";
      this.dataText.cb_type = val;
    },
    change_type(val) {
      console.log(val);
      this.data.cb_type = "";
      this.data.cb_type = val;
      this.getpersonlist();
    },
    addShow() {
      this.modalAddText = true;
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    remove(id) {
      let cb_id = "";
      if (id) {
        cb_id = id;
      } else {
        this.enteralldata.map((itme) => {
          if (cb_id == "") {
            cb_id = itme.cb_id;
          } else {
            cb_id += "," + itme.cb_id;
          }
        });
      }
      apis
        .deletecard({ cb_id: cb_id })
        .then((response) => {
          console.log(response);
          if (response.data.code == 200) {
            this.$Message.success("删除成功");
            this.getpersonlist();
          } else {
            this.$Message.error("删除失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("删除失败!");
        });
    },
    getpersonlist() {
      let that = this;
      apis.getpersonorder(this.data).then((response) => {
        let resdata = response.data;
        if (resdata.code == 200) {
          console.log(response.data);
          that.accountList = resdata.data.depts;
          that.total = response.data.data.countNumber;
        }
      });
    },
    changePage(page) {
      this.data.page = page;
      this.getpersonlist();
    },
    search(val) {
      this.data.page = 1;
      let data = this.data;
      data.par = val;
      this.getpersonlist();
    },
  },
};
</script>

<style scoped>
.padding20 {
  margin: 20px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 90px;
  margin: 5px;
}
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.ivu-modal-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
</style>